<template>
    <List item-layout="vertical">
        <ListItem v-for="item in data" :key="item.title" class="notice">
            <ListItemMeta :avatar="item.avatar" :title="item.title" />
            <div class="text"><p>一、本版只能发布原创作品，包括Windows、Android、iOS和Mac平台等相关应用程序，
                非原创作品可以发布到『精品软件区』，违规发帖将给予删除和扣分。<br>
                二、发布各种原创作品时，必须加上软件正常运行截图、软件介绍和使用说明，
                发布前请自行测试程序是否正常工作。
                同时所有发布的作品最好要有明显的能证明是自己原创的因素，如标题增加“吾爱破解论坛”、
                “www.52pojie.cn”或论坛用户名字样，可以获得更多加分和更长时间加亮推荐。
                对于经常更新的软件，请勿再发新主题进行更新，除非原帖无法编辑回复了，
                否则直接在原帖编辑更新即可，禁止刷多个主题。
                如果没有截图或者原创证明，可能将会被移动至精品区或者被删除，您可至『站务处理』进行申诉。
                对于封装调用别人接口的程序不算原创，禁止发布原创区；修改版权、拿别人源代码进行篡改冒
                充原创作品的行为我们将严惩不贷！
                <br>
            </p>
            </div>
        </ListItem>
        <Row class="plate_invitation" v-for="p in plates" >
            <Col>
                <ListItem class="plate_head">
                    <h2 class="phead-left">{{p.name}}</h2>
                    <h2 class="phead-right">room</h2>
                </ListItem>
            </Col>
            <Col>
                <List  item-layout="vertical">
<!--                    <ListItem v-for="r in remarkPlate">-->
<!--                        <ListItemMeta-->
<!--                                :avatar="r.users.icon"-->
<!--                                :title="r.content" :description="r.users.username"/>-->
<!--                    </ListItem>-->
                    <ListItem>
                        <ListItemMeta
                                avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"
                                title="我发的一篇帖子" description="By 某某某"/>
                    </ListItem>
                    <ListItem>
                        <ListItemMeta
                                avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"
                                title="我发的一篇帖子" description="By 某某某"/>
                    </ListItem>
                </List>
            </Col>
        </Row>
        <Row class="plate_choose">
            <Col>
                <ListItem>
                    <Page :total="100" show-sizer show-elevator class="pchoose-left" />
                    <Button type="primary" shape="circle"size="large" class="pchoose-right">发帖</Button>
                </ListItem>
            </Col>
        </Row>
    </List>


</template>
<script>
    import {mapActions, mapGetters} from "vuex";

    export default {
        data() {
            return {
                pages:[],
                plates:[],
                users:[],
                remarks:[],
                data: [
                    {
                        title: '板块公告',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    }
                ],
                remarkPlate:{
                    current: 1,
                    pages: 1,
                    records: [],
                    size: 10,
                    total: 2,
                }
            }
        },
        props: ['id'],
        computed: {
            ...mapGetters(["User"])
        },
        methods: {
            ...mapActions("page",["getAllPage"]),
            ...mapActions("plate",["getAllPlate"]),
            ...mapActions("user",["getAllUser"]),
        },

        created: function () {
            this.getAllPlate({
                callback: (plates) => {
                    this.plates = plates.records;
                }
            });
        },
        getRemark: function (plate = 1,size = 10) {
            this.getAllRemark({
                plateId: this.id,
                plate,size,
                callback: remarks => {
                    this.remarkPlate = remarks.remarks;
                    this.remarkPlate.records.forEach(x => {
                        this.getUser({
                            id: x.userId,
                            info: (type, msg) => this.$Message[type](msg),
                            callback: (user) => {
                                let {username, icon} = user;
                                this.$set(x, 'username', username)
                                this.$set(x, 'icon', icon)
                            }
                        })
                    })
                }
            })
        }
    }
</script>
<style scoped>
    .notice{
        width: 95%;
        margin: 0 auto;
        box-shadow: 1px 1px 1px 1px #888888;
        padding: 10px;
        margin-bottom: 20px;
    }
    .notice:hover{
        box-shadow: 1px 1px 5px 5px #888888;
    }
    .text{
        font-size: 16px;
    }
    .plate_head{
        /*  width: 95%;
          margin: 0px auto;*/
        /*   box-shadow: 1px 1px 1px 1px #888888;
           padding: 40px;
           line-height: 20px;
           justify-content:left;
           display: flex;*/
        box-shadow: 0px 1px #888888;
        overflow: hidden;
    }
    .phead-left{
        float: left;
        padding-left: 20px ;
    }
    .phead-right{
        /*justify-content:right;*/
        /*display: flex;*/
        float: right;
        padding-right:20px;
        font-weight: 300;
        font-size: 14px;
        font-color: #888888;
    }
    .plate_invitation{
        width: 95%;
        margin: 0 auto;
        box-shadow: 1px 1px 1px 1px #888888;
        padding: 5px ;
    }
    .plate_choose {
        /*   position: absolute;
           bottom: 0;
           left: 60%;
           transform: translateX(-50%);
           margin-bottom: 20px;*/
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
    }
    .pchoose-left{
        float: right;
    }
    .pchoose-right{
        float: left;
    }

</style>
